<template>
  <div class="top10">
    <div class="title">精品好菜</div>
    <div class="list">
      <ul>
        <li
          v-for="li in list"
        >
          <h1>
            <img :src="li.img" alt="">
          </h1>
          <h2>
            <p class="title">
              {{li.name}}
            </p>
            <p class="subtitle">
              {{li.all_click}}浏览
              {{li.favorites}}收藏
            </p>
          </h2>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { watchEffect, ref, computed } from 'vue'
import { useStore } from 'vuex'
export default {
  // props: ['list'],

  setup(props) {
    // const list = ref([])
    const store = useStore()

    // watchEffect(() => {
    //   list.value = props.list
    // })

    return {
      list: computed(() => store.state.list.slice(0, 10))
    }
  }
}
</script>

<style lang='stylus' scoped>
.top10
  > div.title
    height .5rem
    padding-left .1rem
    color #666
    line-height .5rem
  > div.list
    padding-left .1rem
    ul
      display flex
      flex-wrap wrap
      li
        padding-right .1rem
        margin-bottom .1rem
        flex 50%
        h1
          height 0
          padding-bottom 66.666667%
          img
            width 100%
        h2
          background #fff
          height .6rem
          display flex
          flex-direction column
          justify-content center
          align-items center
          font-weight normal
          p.title
            font-size .16rem
          p.subtitle
            color #666
            font-size .12rem
            // transform scale(0.5)

</style>